<!--suppress ALL -->
<template>
  <div>

  <div id="parent" style="margin:0px; overflow: scroll;height:1000px">
    <textarea id="show"></textarea>
    <button id="btn3" v-show="isShowPictureVisible" @click="showPicture">展示</button>
    <button id="btn3"  @click="showBack">进入</button>

    <div id="browse-container" class="ui-state-hover" dir="rtl" :style="{border: bo,background: ba, width: ww,height: h,position:po,left:le, top:top}" >
    </div>

    <div style="clear: both">

    </div>
  </div>
  <!--<div>-->
    <!--<table id = "species" :style="{left: l+'px',top: t+'px'}" >-->
      <!--<tr>-->
        <!--<th>品种</th>-->
      <!--</tr>-->

    <!--</table>-->
  <!--</div>-->

  </div>
</template>

<script src="src/jquery-1.8.1.js"></script>

<script>
  /* eslint-disable no-undef,space-infix-ops,no-trailing-spaces,no-multiple-empty-lines,space-before-blocks,quotes,comma-spacing */

  //   body { text-align:center}
  // .ui-state-hover{
  //   border: solid 5px #333333;
  //   text-align: center;
  //   background: #ffde7f; color:#FFF;
  //   width: 100%;
  // }
  import { getPlotList,addPlot } from '@/api/FarmlandManage'
  import ElCol from "element-ui/packages/col/src/col"
  import { getExperimentFieldList} from '../../api/experimentField'
  import { get} from '../../api/index'
  import axios from 'axios'
  import  VueResource  from 'vue-resource'

  export default {

    components: {ElCol},
    data() {
      return {
        m:0,
        p:0,
        l:1000,
        t:10,
        bo:'solid' + 5+'px'+'#333333',
        ba: '#fffebb',
        w: 2099+'px',
        h: 2414+'px',
        ww: 2099+'px',
        x: -1000,
        le:300+'px',
        top:50+'px',
        //tr: 'scale(0.4,0.6)translate(' + this.x +'px,0)',
        tr: 'scale(0.4,0.6)translate(-500px, -1000px)',
        po: 'relative',
      //(0.5,0.35)  translate(-1500px,-3300px)
        of: scroll,
        aa:{
          margin:0,
        },
        bb:{
          left: 1000,
          top: 10
        },
        choozenYear:2018,
        style: [],
        tableList: [],
        listLoading: true,
        isShowEditVisible: false,
        isShowPictureVisible: true, //用户点击展示后隐藏该按钮，防止出现重叠
        deleteVisible: false,
        temp: {
          uid: '',
          cname: '',
          date: '',
          status: ''
        },
        total: 0,
        page: 1,
        index:0,
        pageSize: 10,

        status: [
          {
            statusId: 1,
            label: '启用'
          }, {
            statusId: 0,
            label: '禁用'
          }
        ],


        plot: '',
        field: '',
        type:[]
      }
    },
    mounted() {
      //this.load()
      //this.tabCell()

console.log('222begin!')
      this.showPicture()

    },
    created() {
      //刚打开页面时就去取数据；
      //this.fetchData()

      console.log("begin!")
      console.log(this.GLOBAL.farmland.width + 'px + ' + this.GLOBAL.farmland.length + 'px')
      this.w = (this.GLOBAL.farmland.width/0.3/5*50)
      this.ww = (this.GLOBAL.farmland.width/0.3/5*50/4) + 'px'
      this.h = (this.GLOBAL.farmland.length/0.65*20/2) + 'px'
      this.x = -(this.GLOBAL.farmland.width*10 + 500)
      this.load()

      //var currentYear = date.getFullYear()
      //this.choozenYear = prompt("请输入年份：")
    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },

    methods: {

      showPicture(){

        this.fetchData()
        this.isShowPictureVisible = false
      },

      load(){
        var container=document.getElementById('browse-container');
        var parent=document.getElementById("parent");
        var myGrids = new Array();
        var h=document.body.clientHeight;
        var w=document.body.clientWidth;
        // container.style.height=2414+"px";
        // container.style.width=2099+"px";
        // parent.style.height=2414+"px";
        // parent.style.width=2099+"px";
      },

      fetchData() {
        this.getExpType()

        var container=document.getElementById('browse-container');
        var parent=document.getElementById("parent");
        var myGrids = new Array();
        var h=document.body.clientHeight;
        var w=document.body.clientWidth;
        var w1 = this.GLOBAL.farmland.width;
        var l1 = this.GLOBAL.farmland.length;
        // container.style.height=2414+"px";
        // container.style.width=2099+"px";
        // parent.style.height=2414+"px";
        // parent.style.width=2099+"px";

        this.$http.get('static/myExps.json').then(res1 => {
          //用axios的方法引入地址
          console.log('22222222222222')
          this.type =res1.data
          //赋值

          console.log(this.type)

        //
        // getExperimentFieldList({'farmlandId':this.GLOBAL.farmland.farmlandId,'year':parseInt(this.choozenYear)}).then(res => {  15530675648024922
        getExperimentFieldList({'farmId': this.GLOBAL.farmland.farmlandId}).then(res => {

          console.log(res.data.rows)
        // this.$http.get('static/myGrids.json').then(res => {
        //   console.log(res.body);
          //var $jsontip = $("#jsonTip");
          //存储数据的变量
          //$jsontip.empty();
          //清空内容

          var json1 = res.data.rows
         // for (var i = 0; i < json1.length; i++) {
          for(let i in json1) {
            var json = json1[i]
            console.log("for循环" + i)
            // $.each(res.body, function (infoIndex, json){
            var fieldId = json["id"];
            console.log("fieldId: " + json["id"])
            var species_num = json["num"];
            var species = json["speciesId"];
            var regular = "";

            var type = this.type
            var p = 0
            for (var q = 0; q < type.length; q++) {
              if (json["expType"] === type[q]['exType']) {
                p = q
              } else {
              }
              console.log("===="+p)
            }

            // var in_row = parseFloat(regular[0] / 2);  //行/2 占几行
            // var in_col = parseInt(regular[1]);   //重复
            // var zhu = parseInt(regular[2]) / 5;   //株/5 占几格
            // var expType = regular[3];
            // var color = regular[4];
            console.log(p+p+p)
            var in_row = parseFloat(this.type[p]['row']) // 行 占几行
            var in_col = parseInt(type[p]['repeat']) // 重复
            var zhu = parseFloat(type[p]['zhu']) / 5 // 株/5 占几格
            var expType = json["expType"]
            var color = type[p]['color']
            console.log(expType);
            regular = json["expType"]
            var width = 10;
            var height = 15;

            //console.log(in_row,in_col,zhu);
            //width = width * zhu * species_num;
            width = (width + 1) * zhu
            //height = height * in_row;
            height = (height + 0.8) * species_num * in_row/3.5;
            // console.log(width,height);
            //创建土地区域
            var area = document.createElement('ul');
            area.style.width = 1 + 'px';

            area.setAttribute("id", fieldId);
            area.setAttribute("name", expType);
            area.setAttribute("color", color);
            area.classList.add('in_p', 'in', 'draggable', 'ui-widget-content');
            area.style.color = color;
            area.style.height = height + 'px';
            //area.style.float = 'right';
            area.style.zIndex = 9;


            console.log(parseInt(json["moveX1"]))
            area.style.position = 'absolute';

            area.style.marginTop = parseInt(json["moveY"])/3+ 'px';
            //area.style.Top = (50+parseInt(json["moveY"]))+ 'px';
            console.log('marginRight:' + this.w + ',,,' + (50+parseInt(json["moveY"])));
            area.style.marginRight = ((this.w - parseInt(json["moveX1"]))/6 - 20) + 'px'; //1666
            //area.style.marginLeft= 1+ 'px';
            container.appendChild(area);

            //var color=getRandomColor();
            for (var i = 0; i < in_col; i++) {
              var t = document.createElement('li');
              var text = document.createTextNode(regular + ' '  + species_num + '品种');
              var span = document.createElement('span');
              span.style.color = '#000000';
              span.style.fontSize = 10;
              span.appendChild(text);
              t.appendChild(span);
              t.style.width = width + 'px';
              t.style.height = height + 'px';
              t.style.backgroundColor = color;
              t.style.zIndex = 11;
              if (i === 0) {
                t.style.marginRight = 0;
              }
              area.appendChild(t);
            }
            area.onclick = function () {
              var field =  this.getAttribute("name")
              console.log(this.getAttribute("name"));
               document.getElementById("show").innerText = this.getAttribute("name")

              // for (var i = 0; i < species.length; i++) {
              //
              //   var tab = "<tr><td>" + species[i] + "</td></tr>";
              //   var html2 = document.getElementById("species").innerHTML;
              //  // $("#species").html(html2 + tab);
              //   document.getElementById(species).html(html2 + tab)
              // }
              //this.$router.push('/allFarmland')
            }
            area.style.cursor='pointer'
            // })
          }
          //显示处理后的数据
        })
        })
        //container.style.transform = 'scale(0.5,0.35)translate(-1000px,-2200px)';
      },

      showBack(){
        console.log(document.getElementById("show").innerHTML)
        this.GLOBAL.field.fieldId = document.getElementById("show").innerHTML
        console.log("plottttttttttttttttttttttttttt: "+this.GLOBAL.field)
        this.$router.push('/plantDesign')
      },
       getExpType() {
        console.log('type:  ')
         this.$http.get('static/myExps.json').then(res => {
           //用axios的方法引入地址
           console.log('22222222222222')
           this.type =res.data
           //赋值

           console.log(this.type)
         })
       }
    }
  }

</script>
